<!DOCTYPE html>
<html>
<head>
    <title>棋盘格</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/three.min.js"></script>
    <script>
        function init(){
            var renderer = new THREE.WebGLRenderer({
                canvas:document.getElementById("mainCanvas")
            });
            //renderer.setClearColor(0x000000);

            var scene = new THREE.Scene();

            var camera = new THREE.OrthographicCamera(-10,10,7.5,-7.5,0.1,100);
            camera.position.set(0,0,25);
            camera.lookAt(new THREE.Vector3(0,0,0));
            scene.add(camera);

            //光源
            var light = new THREE.PointLight(0xfffff,1,1000);
            light.position.set(10,15,20);
            scene.add(light);

            //棋盘格
            var texture = THREE.ImageUtils.loadTexture("../img/7.png",{},
                function(){
                    renderer.render(scene,camera);
                });
            //分格
            texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
            texture.repeat.set(4,4);

            var material = new THREE.MeshLambertMaterial({
                map:texture
            });

            var plane = new THREE.Mesh(new THREE.PlaneGeometry(10,10),material);
            scene.add(plane);

            renderer.render(scene,camera);
        }
    </script>
</head>
<body onload="init()">
    <canvas id="mainCanvas" style="width: 800px;height: 600px;"></canvas>
</body>
</html>